<template>
  <view class="cache-engine-demo">
    <!-- 导航栏 -->
    <xl-nav-bar title="高性能本地缓存引擎" />
    
    <!-- 设备信息展示 -->
    <view class="device-info-section">
      <view class="section-title">设备信息</view>
      <view class="device-info-card">
        <view v-if="deviceInfo" class="info-list">
          <view class="info-item">
            <text class="info-label">设备ID：</text>
            <text class="info-value">{{ deviceInfo.deviceId }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">平台：</text>
            <text class="info-value">{{ deviceInfo.platform }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">版本：</text>
            <text class="info-value">{{ deviceInfo.version }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">语言：</text>
            <text class="info-value">{{ deviceInfo.language }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">厂商：</text>
            <text class="info-value">{{ deviceInfo.vendor }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">型号：</text>
            <text class="info-value">{{ deviceInfo.model }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">屏幕：</text>
            <text class="info-value">{{ deviceInfo.screenWidth }}x{{ deviceInfo.screenHeight }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">像素比：</text>
            <text class="info-value">{{ deviceInfo.pixelRatio }}</text>
          </view>
        </view>
        <view v-else class="loading">
          <text>加载中...</text>
        </view>
      </view>
    </view>
    
    <!-- 组件展示区 -->
    <view class="component-section">
      <xl-cache-engine ref="cacheEngineRef" />
    </view>
    
    <!-- 功能演示区 -->
    <view class="demo-section">
      <view class="section-title">功能演示</view>
      
      <!-- 缓存操作 -->
      <view class="demo-card">
        <view class="card-title">缓存操作</view>
        <view class="card-content">
          <view class="input-group">
            <input type="text" v-model="cacheKey" placeholder="请输入缓存键" class="input" />
            <input type="text" v-model="cacheValue" placeholder="请输入缓存值" class="input" />
          </view>
          <view class="button-group">
            <button class="action-btn" @click="handleSetCache">设置缓存</button>
            <button class="action-btn" @click="handleGetCache">获取缓存</button>
            <button class="action-btn" @click="handleRemoveCache">删除缓存</button>
            <button class="action-btn" @click="handleClearCache">清空缓存</button>
          </view>
          <view class="result-box" v-if="cacheResult">
            <text class="result-label">操作结果：</text>
            <text class="result-value">{{ cacheResult }}</text>
          </view>
        </view>
      </view>
      
      <!-- 性能测试 -->
      <view class="demo-card">
        <view class="card-title">性能测试</view>
        <view class="card-content">
          <view class="button-group">
            <button class="action-btn" @click="handlePerformanceTest">运行性能测试</button>
          </view>
          <view class="result-box" v-if="performanceResult">
            <text class="result-label">测试结果：</text>
            <text class="result-value">{{ performanceResult }}</text>
          </view>
        </view>
      </view>
      
      <!-- 加密演示 -->
      <view class="demo-card">
        <view class="card-title">加密演示</view>
        <view class="card-content">
          <view class="input-group">
            <input type="text" v-model="encryptKey" placeholder="请输入加密键" class="input" />
            <input type="text" v-model="encryptValue" placeholder="请输入加密值" class="input" />
          </view>
          <view class="button-group">
            <button class="action-btn" @click="handleEncrypt">加密数据</button>
            <button class="action-btn" @click="handleDecrypt">解密数据</button>
          </view>
          <view class="result-box" v-if="encryptResult">
            <text class="result-label">加密结果：</text>
            <text class="result-value">{{ encryptResult }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 使用说明 -->
    <view class="usage-section">
      <view class="section-title">使用说明</view>
      <view class="usage-card">
        <view class="usage-item">
          <text class="item-title">1. 初始化缓存引擎</text>
          <text class="item-desc">组件会自动初始化，支持SQLite和IndexedDB双引擎</text>
        </view>
        <view class="usage-item">
          <text class="item-title">2. 设置缓存</text>
          <text class="item-desc">使用set方法设置缓存，支持自动加密和过期时间</text>
        </view>
        <view class="usage-item">
          <text class="item-title">3. 获取缓存</text>
          <text class="item-desc">使用get方法获取缓存，自动处理过期和加密数据</text>
        </view>
        <view class="usage-item">
          <text class="item-title">4. 删除缓存</text>
          <text class="item-desc">使用remove方法删除指定缓存，使用clear清空所有缓存</text>
        </view>
        <view class="usage-item">
          <text class="item-title">5. 自动同步</text>
          <text class="item-desc">支持定时同步和离线数据自动同步</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import XLCacheEngine from '@/components/xl-cache-engine/index.vue';
import XLNavBar from '@/components/xl-nav-bar/index.vue';
import { getDeviceInfo } from '@/components/xl-cache-engine/utils/device.js';

// 组件引用
const cacheEngineRef = ref(null);

// 缓存操作相关
const cacheKey = ref('');
const cacheValue = ref('');
const cacheResult = ref('');

// 加密演示相关
const encryptKey = ref('');
const encryptValue = ref('');
const encryptResult = ref('');

// 性能测试结果
const performanceResult = ref('');

// 设备信息
const deviceInfo = ref(null);

// 获取设备信息
onMounted(async () => {
  try {
    deviceInfo.value = await getDeviceInfo();
  } catch (error) {
    console.error('获取设备信息失败：', error);
  }
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 设置缓存
const handleSetCache = async () => {
  if (!cacheKey.value || !cacheValue.value) {
    cacheResult.value = '请输入缓存键和值';
    return;
  }
  
  try {
    const success = await cacheEngineRef.value.set(cacheKey.value, cacheValue.value);
    cacheResult.value = success ? '设置缓存成功' : '设置缓存失败';
  } catch (error) {
    cacheResult.value = '设置缓存失败：' + error.message;
  }
};

// 获取缓存
const handleGetCache = async () => {
  if (!cacheKey.value) {
    cacheResult.value = '请输入缓存键';
    return;
  }
  
  try {
    const value = await cacheEngineRef.value.get(cacheKey.value);
    cacheResult.value = value ? '获取缓存成功：' + value : '缓存不存在';
  } catch (error) {
    cacheResult.value = '获取缓存失败：' + error.message;
  }
};

// 删除缓存
const handleRemoveCache = async () => {
  if (!cacheKey.value) {
    cacheResult.value = '请输入缓存键';
    return;
  }
  
  try {
    const success = await cacheEngineRef.value.remove(cacheKey.value);
    cacheResult.value = success ? '删除缓存成功' : '删除缓存失败';
  } catch (error) {
    cacheResult.value = '删除缓存失败：' + error.message;
  }
};

// 清空缓存
const handleClearCache = async () => {
  try {
    const success = await cacheEngineRef.value.clear();
    cacheResult.value = success ? '清空缓存成功' : '清空缓存失败';
  } catch (error) {
    cacheResult.value = '清空缓存失败：' + error.message;
  }
};

// 性能测试
const handlePerformanceTest = async () => {
  const testSize = 1000;
  const startTime = Date.now();
  
  try {
    // 批量写入测试
    for (let i = 0; i < testSize; i++) {
      await cacheEngineRef.value.set(`test_key_${i}`, `test_value_${i}`);
    }
    
    // 批量读取测试
    for (let i = 0; i < testSize; i++) {
      await cacheEngineRef.value.get(`test_key_${i}`);
    }
    
    const endTime = Date.now();
    const duration = endTime - startTime;
    
    performanceResult.value = `测试完成：\n写入${testSize}条数据：${duration/2}ms\n读取${testSize}条数据：${duration/2}ms\n总耗时：${duration}ms`;
  } catch (error) {
    performanceResult.value = '性能测试失败：' + error.message;
  }
};

// 加密数据
const handleEncrypt = async () => {
  if (!encryptKey.value || !encryptValue.value) {
    encryptResult.value = '请输入加密键和值';
    return;
  }
  
  try {
    const success = await cacheEngineRef.value.set(encryptKey.value, encryptValue.value);
    encryptResult.value = success ? '加密数据成功' : '加密数据失败';
  } catch (error) {
    encryptResult.value = '加密数据失败：' + error.message;
  }
};

// 解密数据
const handleDecrypt = async () => {
  if (!encryptKey.value) {
    encryptResult.value = '请输入加密键';
    return;
  }
  
  try {
    const value = await cacheEngineRef.value.get(encryptKey.value);
    encryptResult.value = value ? '解密数据成功：' + value : '数据不存在';
  } catch (error) {
    encryptResult.value = '解密数据失败：' + error.message;
  }
};
</script>

<style lang="scss">
.component-section {
  margin-top: 108rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 108rpx 30rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.demo-section {
  padding: 0 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 30rpx;
  }
}

.demo-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .card-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 20rpx;
  }
  
  .card-content {
    .input-group {
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      margin-bottom: 20rpx;
      
      .input {
        width: 100%;
        height: 80rpx;
        background-color: #f5f5f5;
        border-radius: 10rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
      }
    }
    
    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
      margin-bottom: 20rpx;
      
      .action-btn {
        flex: 1;
        min-width: 200rpx;
        height: 80rpx;
        background-color: #007AFF;
        color: #ffffff;
        border-radius: 10rpx;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &:active {
          opacity: 0.8;
        }
      }
    }
    
    .result-box {
      background-color: #f5f5f5;
      border-radius: 10rpx;
      padding: 20rpx;
      
      .result-label {
        font-size: 28rpx;
        color: #666666;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .result-value {
        font-size: 28rpx;
        color: #333333;
        word-break: break-all;
      }
    }
  }
}

.usage-section {
  padding: 0 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 30rpx;
  }
}

.usage-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .usage-item {
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .item-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 10rpx;
      display: block;
    }
    
    .item-desc {
      font-size: 26rpx;
      color: #666666;
      line-height: 1.5;
    }
  }
}

.device-info-section {
  padding: 0 30rpx;
  margin-top: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 30rpx;
  }
}

.device-info-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .info-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    
    .info-label {
      font-size: 28rpx;
      color: #666666;
      width: 160rpx;
    }
    
    .info-value {
      font-size: 28rpx;
      color: #333333;
      flex: 1;
    }
  }
  
  .loading {
    text-align: center;
    padding: 30rpx;
    color: #999999;
    font-size: 28rpx;
  }
}
</style> 